<template>
  <div class="pagestyle">
    <div v-if="state.datatree.length == 0 && !state.addShowTtation&&state.treeSearch==''">
      <p class="tree_title">
        <span class="fw700">分站以及测点配置</span>
      </p>
      <div style="text-align: center">
        <img src="@/assets/images/nodata.png" alt="" />
        <p>暂无数据，请先配置分站</p>
        <el-button plain type="info" @click="addstationBtn">新增分站</el-button>
      </div>
    </div>
    <el-card v-if="state.treeSearch||state.datatree.length > 0||state.addShowTtation==true" style="margin-top: 10px">
      <el-row :gutter="20" style="overflow-y: auto">
        <!-- 左侧树形 -->
        <el-col :span="5">
          <div
            class="p10"
            style="
              height: calc(100vh - 190px);
              overflow-y: auto;
              overflow-x: hidden;
            "
          >
            <div class="title_r_box">
              <p class="tree_title">
                <span>分站以及测点配置</span>
              </p>
              <el-button
                type="primary"
                class="w100"
                style="margin-bottom: 10px"
                @click="addstationBtn"
              >
                <el-icon> <Plus /> </el-icon>新增分站
              </el-button>
              <el-input
                clearable
                v-model="state.treeSearch"
                @blur="treeSearchBlur"
                @change="treeSearchBlur"
                placeholder="搜索"
              >
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <search />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <el-tree
              ref="pointtree"
              :data="state.datatree"
              :props="state.defaultProps"
              :highlight-current="true"
              node-key="value"
              @node-click="handleNodeClick"
              style="margin-top: 20px"
              class="custom-tree"
              :current-node-key="state.curTreeId"
              :default-expanded-keys="state.defaultExpandedNodes"
              accordion
              :filter-node-method="filterNode"
            >
              <template #default="{ node, data }">
                <span
                  class="custom-tree-node fsc"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                  @mouseenter="mouseenter(data)"
                  @mouseleave="mouseleave(data)"
                >
                  <span>
                    <svg-icon
                      v-if="data.children"
                      class-name="search-icon"
                      icon-class="wenjian"
                      style="margin-right: 5px"
                    />
                         <!-- <span v-if="node.data.pointTypeName=='测点'&&node.data.pointNum!=null" class="blue">{{ node.data.pointTypeName }}</span> -->
                            
<!-- 
                                          <el-tooltip v-else class="box-item" effect="light" :content="node.label"
                                              placement="right">
                                <span style="margin-left: 5px;">{{ node.label }}</span>
                                          </el-tooltip> -->
                                          <!-- <span v-if="node.data.kaichukoName=='开出口'" class="grey">{{ node.label }}</span> -->

                                          <span v-if="node.data.pointTypeName=='测点'&&node.data?.pointNum!=null"  class="blue">{{ node.data.pointTypeName }}</span>
                                          <span v-if="node.data.pointTypeName=='测点'&&node.data?.pointNum!=null" style="margin-left: 5px;" :title="node.data?.pointNum+'/'+node.label">{{ node.data?.pointNum }}/{{ node.label }}</span>
                                          <span v-else style="margin-left: 5px;" :title="node.label" :class="node.data.kaichukoName=='开出口'?'grey':''">{{ node.label }}</span>
                    <!-- 开出口数量 -->
                    <span v-if="data.children && data.value == 'noopen'"
                      >({{
                        data.children.length
                      }})</span
                    >
                    <!-- 分站总数 -->
                    <span
                      v-if="
                        data.children &&
                        data.value != 'nopoint' &&
                        data.value != 'noopen'
                      "
                      >({{ data.totalNum }})</span
                    >
                    <!-- 测点数量 -->
                    <span v-if="data.value == 'nopoint'"
                      >({{ data.children.length }})</span
                    >
                  </span>
                  <span>
                    <!-- 测点添加 -->
                    <svg-icon
                      v-if="data.value == 'nopoint'"
                      class-name="search-icon"
                      icon-class="addtotal"
                      @click.stop="
                        addtreePonit(data.id, node.parent.data.value)
                      "
                    />
                    <!-- 分站删除 -->
                    <svg-icon
                      v-show="data.del"
                      v-if="data.type == 'fenzhan'"
                      class-name="search-icon"
                      icon-class="delkong"
                      @click.stop="deletetree(data.value)"
                    />
                    <!-- 测点删除 -->
                    <svg-icon
                      v-show="data.del"
                      class="deleteIcon"
                      v-if="node.parent.data.value == 'nopoint'"
                      class-name="search-icon"
                      icon-class="delkong"
                      @click.stop="deletetreepoint(data.value)"
                    />
                    <!-- 开出口删除 -->
                    <svg-icon
                      v-show="data.del"
                      class="deleteIcon"
                      v-if="
                        node.parent.data.value == 'noopen' &&
                        node.data.controlPortType != null
                      "
                      class-name="search-icon"
                      icon-class="delkong"
                      @click.stop="
                        delopenClick(
                          node.data.controlPort,
                          node.parent.parent.data.value
                        )
                      "
                    />
                  </span>
                </span>
              </template>
            </el-tree>
          </div>
        </el-col>
        <!-- 新增分站页面 -->
        <el-col :span="19" v-if="state.addShowTtation == true">
          <div
            style="
              height: calc(100vh - 240px);
              overflow-y: auto;
              overflow-x: hidden;
            "
          >
            <div class="title_r_box">
              <p class="p_btn" v-if="state.fenzhan=='编辑分站'">
                <!-- <oneclickDelivery></oneclickDelivery> -->
                <el-button type="primary1" @click="publishClick('分站')">一键下发</el-button>
              </p>
              <p class="title_r">
                <span class="fz16 active">分站信息</span>
                <!-- (若想添加分站类型/重新修改分站类型，<el-button
                                  type="primary" @click="tostationType" link>请点击跳转</el-button>) -->
              </p>
            </div>
            <el-form
              class="formBox"
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <div class="desc_box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="分站编号（范围：1~255）"
                      prop="substationNumber"
                    >
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.formData.substationNumber"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.fenzhanSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="IP" prop="ipAddress">
                      <el-input
                        v-model="state.formData.ipAddress"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="端口" prop="port">
                      <el-input
                        v-model="state.formData.port"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="采集板类型" prop="acquisitionBoardType">
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.formData.acquisitionBoardType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.caijibanSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="安装地点" prop="replaceId">
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        allow-create
                        v-model="state.formData.replaceId"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.placeSelectList"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="子网掩码" prop="subnetMask">
                      <el-input
                        v-model="state.formData.subnetMask"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="网关" prop="gateway">
                      <el-input
                        v-model="state.formData.gateway"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
          <div class="footer_card fbc">
            <span></span>
            <span>
              <el-button class="btn" type="info" @click="cancelClick"
                >取消</el-button
              >
              <el-button class="btn" type="primary" @click="addClick"
                >确定</el-button
              >
            </span>
          </div>
        </el-col>
                    <!-- 有左侧数据展示页面 -->
                    <el-col :span="19" v-if="state.nodetailShowTtation == true">
                  <div class="fdcc h100">
                      <img style="margin-left:-20px;" src="@/assets/images/nodata.png" />
                      <p style="color:rgba(0,0,0,0.5)">请在左侧点击查看</p>
                  </div>
              </el-col>
              <!-- 分站详情 -->
              <el-col :span="19" v-if="state.detailShowTtation == true">
                  <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                      <div class="title_r_box">
                          <p class="p_btn">
                              <!-- <oneclickDelivery></oneclickDelivery> -->
                              <el-button type="primary1" @click="publishClick('分站')">一键下发</el-button>
                          </p>
                          <p class="title_r fbc">
                              <span class="fz16 active">分站信息</span>
                              <div>
                                  <el-button link size="small" type="primary" @click="editstationBtn">
                                      <svg-icon class-name="search-icon" icon-class="editponit" />编辑</el-button>
                                  <el-button link size="small" type="primary"
                                      @click="addtreePonit(state.datatreeId,state.datatreeCode)">
                                      <svg-icon class-name="search-icon" icon-class="addponit" />新增测点
                                  </el-button>
                                  <!-- <el-button link size="small" type="primary">
                                      <svg-icon class-name="search-icon" icon-class="muponit" />模板</el-button> -->
                                  <el-button link size="small" type="primary"
                                      @click.stop="deletetree(state.fenzhanDetailData.id)">
                                      <svg-icon class-name="search-icon" icon-class="delpoint" />删除
                                  </el-button>
                              </div>
                          </p>
                      </div>
                      <div class="formBox">
                          <div class="desc_box">
                              <p class="drawer_sub_title">
                                  <span>
                                      <svg-icon class-name="search-icon" icon-class="map" />
                                      <!-- {{state.formData.stationPlaceName}} -->
                                       {{state.fenzhanDetailData.substationNumber+'-'+state.fenzhanDetailData.acquisitionBoardType}}
                                    </span>
                              </p>
                              <el-divider />
                                 <div class="desc_box_item">
                                   <img src="@/assets/images/keranqiti/远程控制.png" alt="">
                                   <div class="one">
                                     <!-- <span>在线</span> -->
                                     <span>{{state.fenzhanDetailData.acquisitionBoardType}}</span>
                                   </div>
                                   <div class="two">
                                    {{state.fenzhanDetailData.substationNumber+'-'+state.fenzhanDetailData.acquisitionBoardType}}
                                   </div>
                                   <div class="three">
                                    <div class="three-item">
                                      <span :style="state.fenzhanDetailData.error==true?'color:red;':state.fenzhanDetailData.error==false?'color:green;':''">{{ state.fenzhanDetailData.error==true?'异常':state.fenzhanDetailData.error==false?'正常':'未下发' }}</span>
                                      <span v-if="state.fenzhanDetailData.check">自检</span>
                                      <span v-if="state.fenzhanDetailData.mute">消音</span>
                                    </div>
                                    <div class="three-item">
                                    </div>
                                   </div>
                                   <div class="four">
                                     <div class="four-item">
                                      <div class="four-item-top">ip端口</div>
                                      <div class="four-item-bottom">{{ state.fenzhanDetailData.ipAddress+':'+state.fenzhanDetailData.port }}</div>
                                     </div>
                                     <div class="four-item" style="margin: 0 50px;">
                                      <div class="four-item-top">安装时刻</div>
                                      <div class="four-item-bottom">{{ state.fenzhanDetailData.isCreateTime }}</div>
                                     </div>
                                     <div class="four-item">
                                      <div class="four-item-top">安装地点</div>
                                      <div class="four-item-bottom">
                                        <span v-for="(item,index) in state.placeSelectList" :key="index">
                                          {{ state.fenzhanDetailData.replaceId==item.value?item.label:'' }}
                                        </span>
                                      </div>
                                     </div>
                                   </div>
                                 </div>
                          </div>
                      </div>
                  </div>
              </el-col>
              <!-- 新增测点页面 -->
               <el-col :span="19" v-if="state.addShowPoint == true">
                  <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                    <div class="title_r_box">
                          <p class="p_btn">
                              <!-- <oneclickDelivery></oneclickDelivery> -->
                              <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button>
                          </p>
                          <p class="title_r"><span class="fz16 hover" @click="stationBtndesc">分站信息</span>
                              <span class="fz16 active">测点信息</span></p>
                      </div>
                      <el-form
              class="formBox"
              ref="cedianformRef"
              :model="state.cedianformData"
              :rules="state.cedianrules"
              label-position="top"
            >
              <div class="desc_box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="测点编号"
                      prop="pointNum"
                    >
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.cedianformData.pointNum"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.pointSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="传感器名称" prop="imitateSensorName">
                      <!-- <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.cedianformData.imitateSensorName"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.chuanganqiSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select> -->
                      <el-cascader
                        style="width: 100%"
                        clearable
                        v-model="state.cedianformData.imitateSensorName3"
                        :options="state.deviceNameList"
                        :props="state.props"
                        @change="handleCascaderChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="安装地点" prop="sensorPlace">
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.cedianformData.sensorPlace"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in state.placeSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <!-- <el-input
                        disabled
                        v-model="state.formData.stationInNum"
                        placeholder="请输入"
                      >
                      </el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="报警屏蔽" prop="alarmShielding">
                      <el-radio-group v-model="state.cedianformData.alarmShielding">
      <el-radio :label="0" size="large">开启</el-radio>
      <el-radio :label="1" size="large">关闭</el-radio>
    </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="故障断电" prop="faultOutage">
                      <el-radio-group v-model="state.cedianformData.faultOutage">
      <el-radio :label="0" size="large">开启</el-radio>
      <el-radio :label="1" size="large">关闭</el-radio>
    </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane name="first">
      <template #label>
<div style="display: flex;align-items: center;">
  <span>报警配置</span>
  <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
</div>
      </template>
      <!-- <el-form
              class="formBox"
              ref="formRef"
              :model="state.cedianformData2"
              :rules="state.cedianrules2"
              label-position="top"
            > -->
              <div class="desc_box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                      label="报警模式"
                      prop="faultMode"
                    >
                      <el-select
                        class="w100"
                        clearable
                        filterable
                        v-model="state.cedianformData.faultMode"
                        placeholder="请选择"
                        @change="changeFaultMode"
                      >
                        <el-option
                          v-for="item in state.warningSelectList"
                          :key="item"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="低报警值" prop="lowFaultData">
                      <el-input
                      :disabled="state.cedianformData.faultMode==0||state.cedianformData.faultMode==2"
                        v-model="state.cedianformData.lowFaultData"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="高报警值" prop="highFaultData">
                      <el-input
                      :disabled="state.cedianformData.faultMode==0||state.cedianformData.faultMode==1"
                        v-model="state.cedianformData.highFaultData"
                        placeholder="请输入"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            <!-- </el-form> -->
    </el-tab-pane>
    <el-tab-pane name="second">
      <template #label>
        <span>普通断电</span>
        <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
      </template>
      <div  style="margin-bottom: 10px;">
        <span>断电模式</span>
<el-select v-model="state.cedianformData.outageMode" style="margin-left: 10px;">
  <el-option label="断电关闭" value="00"></el-option>
  <el-option label="低报警断电" value="01"></el-option>
  <el-option label="高报警断电" value="10"></el-option>
  <el-option label="报警断电" value="11"></el-option>
</el-select>
      </div>
      <div style="margin-bottom: 10px;">
        <!-- <span>报警模式</span>
        <span style="background-color: #eceef0;padding: 5px 30px;margin-left: 10px;">{{ state.cedianformData.faultMode=='0'?'无报警':state.cedianformData.faultMode=='1'?'低报警':state.cedianformData.faultMode=='2'?'高报警':state.cedianformData.faultMode=='3'?'高低报警':'' }}</span> -->
        <!-- <span style="padding: 5px 0px;">{{ state.cedianformData.faultMode=='0'?'无报警':state.cedianformData.faultMode=='1'?'低报警':state.cedianformData.faultMode=='2'?'高报警':state.cedianformData.faultMode=='3'?'高低报警':'' }}</span> -->
      </div>
      <vxe-table ref="tableRef" border :data="state.putongduandian"
            :row-config="{keyField: 'outPort', isHover: true}"
      :checkbox-config="{checkRowKeys: state.defaultSelectRowKeys}"
      @checkbox-change="checkchange">
                      <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                          :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                          :key="index">
                      </vxe-column> -->
                      <vxe-column type="checkbox" :width="42"></vxe-column>
                      <vxe-column
                      title="开出口号"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true">
                        <template #default="{ row }">{{ row.outPort }}</template>
                        </vxe-column>
                  </vxe-table>
    </el-tab-pane>
  </el-tabs>
            </el-form>
            <div class="footer_card fbc" style="position: absolute;bottom: 0;right: 0;">
            <span></span>
            <span>
              <el-button class="btn" type="info" @click="cancelpointClick"
                >取消</el-button
              >
              <el-button class="btn" type="primary" @click="addsubmitpointClick"
                >确定</el-button
              >
            </span>
          </div>
                  </div>
                  </el-col>
                  <!-- 测点详情 -->
                  <el-col :span="19" v-if="state.addShowdetailPoint ==true">
                    <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                      <div class="title_r_box">
                          <p class="p_btn">
                              <!-- <oneclickDelivery></oneclickDelivery> -->
                              <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button>
                          </p>
                          <p class="title_r fbc">
                              <span>
                                  <span class="fz16 hover"
                                      @click="stationBtndesc()">分站信息</span>
                                  <span class="fz16 active">测点信息</span>
                              </span>
                              <span>
                                  <el-button link size="small" type="primary" @click="editstationPointBtn('',1)">
                                      <svg-icon class-name="search-icon" icon-class="editponit" />编辑</el-button>
                                  <el-button link size="small" type="primary"
                                      @click.stop="deletetreepoint(state.cedianDetailData.id)">
                                      <svg-icon class-name="search-icon" icon-class="delpoint" />删除
                                  </el-button>
                              </span>
                          </p>
                      </div>
                      <div class="formBox">
                          <div class="desc_box">
                              <p class="drawer_sub_title">
                                  <span>
                                      <svg-icon class-name="search-icon" icon-class="map" />
                                    <span>{{ state.cedianDetailData?.sensorPlace }}</span>  
                                    </span>
                              </p>
                            <el-divider />
                        <el-row :gutter="20" class="cedianxinxi">
                          <el-col :span="5">
                                      <div class="cedianxinxi-left">
                              <img src="@/assets/images/keranqiti/测点信息.png" alt="">
                              <!-- <div class="onlines">
                                在线
                              </div> -->
                              <div class="names">
                                {{ state.cedianDetailData?.imitateSensorName }}
                              </div>
                                      </div>
                                  </el-col>
                                  <el-col :span="19">
                                      <div class="cedianxinxi-right">
                                        <el-row :gutter="20">
                                          <el-col :span="12">
                                            <div class="t1">测点编号</div>
                                            <div class="t2">{{ state.cedianDetailData?.pointNum }}</div>
                                          </el-col>
                                          <el-col :span="12">
                                            <div class="t1">传感器名称</div>
                                            <div class="t2">{{ state.cedianDetailData?.imitateSensorName }}</div>
                                          </el-col>
                                      </el-row>
                                      </div>
                                  </el-col>
                        </el-row>
                          </div>
                      </div>
                      <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane name="first">
      <template #label>
<div style="display: flex;align-items: center;">
  <span>报警配置</span>
  <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
</div>
      </template>
      <el-form
              class="formBox"
              ref="formRef"
              :model="state.cedianformData2"
              :rules="state.cedianrules2"
              label-position="top"
            >
              <div class="desc_box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item
                    label="报警模式"
                      prop="stationCode"
                    >
                    <template #label>
                      <span style="color: rgba(62, 70, 79, 0.6);">报警模式</span>
                    </template>
                    <span style="font-weight: 700;">{{ state.cedianDetailData?.faultMode==0?'无报警':
                    state.cedianDetailData?.faultMode==1?'低报警':state.cedianDetailData?.faultMode==2?
                    '高报警':state.cedianDetailData?.faultMode==3?'高低报警':'' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="低报警值" prop="stationTypeId">
                      <template #label>
                      <span style="color: rgba(62, 70, 79, 0.6);">低报警值</span>
                    </template>
                      <span style="font-weight: 700;">{{ state.cedianDetailData?.lowFaultData }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="高报警值" prop="stationInNum">
                      <template #label>
                      <span style="color: rgba(62, 70, 79, 0.6);">高报警值</span>
                    </template>
                 <span style="font-weight: 700;">{{ state.cedianDetailData?.highFaultData }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
    </el-tab-pane>
    <el-tab-pane name="second">
      <template #label>
        <span>普通断电</span>
        <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
      </template>
      <div style="margin-bottom: 10px;">
        <span>断电模式</span>
        <span style="background-color: #eceef0;padding: 5px 30px;margin-left: 10px;">{{ state.cedianDetailData?.outageMode=='00'?'断电关闭':
                    state.cedianDetailData?.outageMode=='01'?'低报警断电':state.cedianDetailData?.outageMode=='10'?
                    '高报警断电':state.cedianDetailData?.outageMode=='11'?'报警断电':'' }}</span>
      </div>
      <vxe-table border    ref="tableRef"   :row-config="{keyField: 'outPort', isHover: true}"
      :checkbox-config="{checkRowKeys: state.defaultSelectRowKeys}" :data="state.putongduandian">
                      <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                          :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                          :key="index">
                      </vxe-column> -->
                      <vxe-column type="checkbox" :width="42"></vxe-column>
                      <vxe-column
                      title="开出口号"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true">
                        <template #default="{ row }">{{ row.outPort }}</template>
                        </vxe-column>
                  </vxe-table>
    </el-tab-pane>
  </el-tabs>
                      </div>  
                    </el-col>
                     <!-- 开出口详情 -->
                    <el-col :span="19" v-if="state.addShowOpendetailShow ==true">
                  <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                    <div class="title_r_box">
                          <p class="p_btn">
                              <!-- <oneclickDelivery></oneclickDelivery> -->
                              <!-- <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button> -->
                          </p>
                          <p class="title_r fbc">
                              <span>
                                  <span class="fz16 hover"
                                      @click="stationBtndesc()">分站信息</span>
                                  <span class="fz16 active">开出口信息</span>
                              </span>
                              <!-- <span>
                                  <el-button link size="small" type="primary" @click="editopenBtn">编辑</el-button>
                                  <el-button link size="small" type="primary"
                                      @click="delopenClick(state.formData2.controlPort,state.formData2.stationCode)">
                                      删除
                                  </el-button>
                              </span> -->
                          </p>
                      </div>
                      <el-form class="formBox" ref="formRef2" :model="state.formData2" :rules="state.rules2"
                      label-position="top">
<div class="kaichuko-title">
  控制源
</div>
<vxe-table style="margin: 0 10px;" border :data="state.kaichukoData">
                      <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                          :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                          :key="index">
                      </vxe-column> -->
                      <vxe-column type="checkbox" :width="42"></vxe-column>
                      <vxe-column
                      title="测点编号"
                      field="pointNum"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                       <vxe-column
                      title="测点名称"
                      field="pointNum"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                       <!-- <vxe-column
                      title="单位"
                      field="pointNum"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column> -->
                       <vxe-column
                      title="安装地点"
                      field="sensorPlace"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                       <vxe-column
                      title="报警类型"
                      field="faultMode"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                       <vxe-column
                      title="低警值"
                      field="lowFaultData"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                       <vxe-column
                      title="高警值"
                      field="highFaultData"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                      <!-- <vxe-column
                      v-for="(item,index) in state.kaichukoHeader"
                      :key="index"
                      :title="item.title"
                      :field="item.field"
                       :show-overflow="true" :resizable="true" :show-header-overflow="true">
                        <template #default="{ row }">{{ row[item.field] }}</template>
                        </vxe-column> -->
                        <vxe-column title="操作" width="150">
            <template #default="{row}">
              <!-- <slot name="opraCurdBtn" :row="row"></slot> -->
               <el-button type="text" @click="cedianDetailBtn(row)">测点详情</el-button>
            </template>
          </vxe-column>
                  </vxe-table>
</el-form>
                  </div>
                      </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
import oneclickDelivery from "@/components/commonCom/oneclickDelivery";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "@/utils/request";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { set } from "lodash";
import { id } from "element-plus/es/locales.mjs";
const { proxy } = getCurrentInstance();
const route = useRoute();
const state = reactive({
  defaultSelectRowKeys:[],
  records:[],//开出口号
  datatree: [],
  leftTreeDetail: {}, //左侧树形点击后数据
  props: {
    value: "value",
    label: "label",
    children: "childs",
  },
  deviceNameList: [], //测点信息，传感器名称
  defaultProps: {
    children: "children",
    label: "label",
  }, //左侧树形
  formData: {},
  rules: {},
  cedianformData: {}, //新增测点页面
  cedianrules: {
    pointNum: [
      { required: true, message: "请选择测点编号", trigger: "change" },
    ],
    imitateSensorName: [
      { required: true, message: "请选择传感器名称", trigger: "change" },
    ],
    sensorPlace: [
      { required: true, message: "请选择安装地点", trigger: "change" },
    ],
    alarmShielding: [
      { required: true, message: "请选择报警屏蔽", trigger: "change" },
    ],
    faultOutage: [
      { required: true, message: "请选择故障断电", trigger: "change" },
    ],

    faultMode: [
      { required: true, message: "请选择报警模式", trigger: "change" },
    ],
    lowFaultData: [
      { required: true, message: "请输入低报警值", trigger: "blur" },
    ],
    highFaultData: [
      { required: true, message: "请输入高报警值", trigger: "blur" },
    ],
  },
  cedianformData2: {}, //新增测点页面tabs报警配置
  cedianrules2: {},
  curTreeId: "",
  defaultExpandedNodes: [],
  treeSearch: "",
  ationNosList: [],
  fenzhan: "新增分站", //提交表单用于判断是新增还是编辑
  cedian: "新增测点", //提交表单用于判断是新增还是编辑
  fenzhanSelectList: [], //分站编号列表
  placeSelectList: [], //安装地点列表
  pointSelectList: [], //测点编号列表
  chuanganqiSelectList: [], //传感器名称列表
  fenzhanDetailData: {}, //分站详情数据
  cedianDetailData: {}, //测点详情数据
  caijibanSelectList: [
    { label: "电流型采集板(16)测点", value: "1" }, //1:电流型采集板(16)测点
    { label: "485型采集板(256)测点", value: "2" }, //2:485型采集板(256)测点
  ], //采集板列表
  warningSelectList: [
    { label: "无报警", value: "0" },
    { label: "低报警", value: "1" },
    { label: "高报警", value: "2" },
    { label: "高低报警", value: "3" },
  ], //报警模式列表
  addressInfoList: [],
  putongduandian: [
    // { outPort: 1,id:1 },
    // { outPort: 2,id:2 },
    // { outPort: 3,id:3 },
    // { outPort: 4,id:4 },
    { outPort: 1 },
    { outPort: 2 },
    { outPort: 3 },
    { outPort: 4 },
  ], //普通断电测点列表
  addShowTtation: false, //新增分站页面
  nodetailShowTtation: false, //有左侧数据展示页面
  detailShowTtation: false, //分站详情页面
  addShowPoint: false, //新增测点页面
  activeName: "first", //tab切换
  addShowdetailPoint: false, //新增测点详情页面
  addShowOpendetailShow: false, //开出口详情页面
  kaichukoData: [], //开出口列表
});
//新增分站
const addstationBtn = () => {
  state.fenzhan = "新增分站";
  state.formData = {};
  state.fenzhanDetailData = {};
  state.leftTreeDetail = {};
  state.addShowPoint = false;
  state.addShowTtation = true;
  state.detailShowTtation = false;
  state.addShowdetailPoint = false;
  state.nodetailShowTtation = false;
  state.addShowdetailPoint = false;
};

//左侧树形点击
const handleNodeClick = (data, node, event) => {
  state.addShowdetailPoint = false;//加此行代码否则开出口号回填无变化
  state.leftTreeDetail = data;
  console.log(data, "data");
  console.log(node, "node");
  if (data.type == "fenzhan") {
    axios.post("/gas/substation/list", { id: data.value }).then((res) => {
      if (res.rows) {
        state.fenzhanDetailData = res.rows[0];
        state.detailShowTtation = true;
        state.addShowTtation = false;
        state.nodetailShowTtation = false;
        state.addShowPoint = false;
        state.addShowOpenShow = false;
        state.addShowOpendetailShow = false;
        state.addShowdetailPoint = false;
        // state.cutValueListyou = false;
      }
    });
  } else if (data.pointTypeName == "测点") {
  let arr=[]
    axios.get("/system/point/" + data.value).then((res) => {
      state.records=[]
      state.defaultSelectRowKeys=[]
      state.cedianDetailData = res.data;
      state.records=res.data.gasBaseMeasurePointOutageList
      state.records.forEach(item => {
arr.push(item.outPort)
      })
      state.defaultSelectRowKeys=arr
      console.log(state.defaultSelectRowKeys,'state.defaultSelectRowKeys')
      state.detailShowTtation = false;
      state.addShowTtation = false;
      state.nodetailShowTtation = false;
      state.addShowPoint = false;
      state.addShowOpenShow = false;
      state.addShowOpendetailShow = false;
      state.addShowdetailPoint = true;

      // state.cutValueListyou = false;
    });
  } else if (data.kaichukoName == "开出口") {
    state.activeName = "first";
    addOpenBtn(data.value, node.parent.parent.data.value);
  }
  // getSelectList()
};
function filterNode(value, data) {
  if (!value) return true;
  return data.label.includes(value);
}
//鼠标移入显示删除按钮
const mouseenter = (data) => {
  // console.log(data, "data");
  data.del = true;
};
//鼠标移出隐藏删除按钮
const mouseleave = (data) => {
  data.del = false;
};
//左侧树形搜索
const treeSearchBlur = () => {
  let obj = {};
  if (state.treeSearch) {
    obj.substationNumber = state.treeSearch;
  } else {
    obj = {};
  }
  state.addShowOpenShow = false;
  state.addShowOpendetailShow = false;
  state.addShowdetailPoint = false;
  state.addShowPoint = false;
  state.addShowTtation = false;
  state.detailShowTtation = false;
  getLeftTreeList(obj);
};
//一键下发
const publishClick = (val) => {
  if (val == "分站") {
    axios
      .post("/gas/substation/substationLssue", {
        id: state.leftTreeDetail.value,
      })
      .then((res) => {
        if (res.code == 200) {
          ElMessage.success(res.msg);
        }
      });
  } else if (val == "测点") {
    axios
      .post("/system/point/pointLssue", {
        id: state.leftTreeDetail.value,
      })
      .then((res) => {
        if (res.code == 200) {
          ElMessage.success(res.msg);
        }
      });
  }
};
//取消分站信息提交
const cancelClick = () => {
  state.addShowPoint = false;
  state.addShowTtation = false;
  state.addShowdetailPoint = false;
  state.nodetailShowTtation = false;
  state.addShowdetailPoint = false;
  state.detailShowTtation = true;
  state.formData = {};
};
//新增分站信息提交
const addClick = () => {
  console.log(state.formData, "formData");
  let fenzhanUrl = "/gas/substation/add";
  if (state.fenzhan == "新增分站") {
    fenzhanUrl = "/gas/substation/add";
  } else if (state.fenzhan == "编辑分站") {
    fenzhanUrl = "/gas/substation/update";
  }
  if (state.formData.acquisitionBoardType) {
    state.formData.acquisitionBoardType = Number(
      state.formData.acquisitionBoardType
    );
  }
  axios.post(fenzhanUrl, state.formData).then((res) => {
    getLeftTreeList({});
    getSelectList();
    setTimeout(() => {
      state.nodetailShowTtation = false;
      state.addShowTtation = false;
      state.addShowPoint = false;
      state.addShowdetailPoint = false;
      state.addShowOpendetailShow = false;
      state.detailShowTtation = true;
      state.fenzhanDetailData = state.formData;
      state.treeSearch = "";
    }, 500);
  });
};
//分站信息中编辑按钮
const editstationBtn = () => {
  getSelectList();
  state.fenzhan = "编辑分站";
  state.formData = state.fenzhanDetailData;
  state.addShowPoint = false;
  state.addShowTtation = true;
  state.detailShowTtation = false;
  state.addShowdetailPoint = false;
  state.nodetailShowTtation = false;
  state.addShowdetailPoint = false;
};
//分站信息中删除按钮
const deletetree = (datatreeCode) => {
  ElMessageBox.confirm("确定要删除吗?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.delete("/gas/substation/" + datatreeCode).then((res) => {
        if (res.code == 200) {
          ElMessage.success(res.msg);
          getLeftTreeList({});
          state.addShowTtation = false;
          state.detailShowTtation = false;
          state.nodetailShowTtation = true;
          state.addShowPoint = false;
          state.addShowOpenShow = false;
          state.addShowOpendetailShow = false;
          state.addShowdetailPoint = false;
          // state.cutValueListyou = false;
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch(() => {
      proxy.$modal.msgWarning("删除取消");
    });
};
//新增测点
const addtreePonit = (datatreeId, datatreeCode) => {
  getSelectList();
  // state.records=[]
  // state.defaultSelectRowKeys=[]
  console.log(state.records,'state.records')
  console.log(state.defaultSelectRowKeys,'state.defaultSelectRowKeys')
//刷新表格

  state.cedian = "新增测点";
  state.cedianDetailData = {};
  state.cedianformData = {};
  state.addShowPoint = true;
  state.addShowTtation = false;
  state.detailShowTtation = false;
  state.addShowdetailPoint = false;
  state.nodetailShowTtation = false;
  state.addShowdetailPoint = false;
};
//测点信息取消按钮
const cancelpointClick = () => {
  state.addShowPoint = false;
  state.addShowTtation = false;
  state.detailShowTtation = false;
  state.nodetailShowTtation = false;
  state.addShowdetailPoint = false;
  state.addShowdetailPoint = true;

  state.cedianformData = {};
};
function checkchange(e) {
  state.records=[]

      state.records = e.records;
      state.records.forEach((item) => {
item.outPort = Number(item.outPort)
  })
      console.log(state.records,'e')
    }
//测点信息提交按钮
let cedianformRef = ref();
const addsubmitpointClick = () => {
  cedianformRef.value.validate((valid) => {
    if (valid) {
      if (
        state.cedianformData.faultMode!='1'&&
        Number(state.cedianformData.lowFaultData) >
        Number(state.cedianformData.highFaultData)
      ) {
        proxy.$modal.msgWarning("低报警值不能大于高报警值");
      } else {
        state.cedianformData.substationId = state.fenzhanDetailData.id;
        state.cedianformData.gasBaseMeasurePointOutageList = state.records;
        if (state.cedian == "新增测点") {
          axios.post("/system/point", state.cedianformData).then((res) => {
            if (res.code == 200) {
              ElMessage.success(res.msg);
              getLeftTreeList({});
              getSelectList();
              setTimeout(() => {
                state.activeName = "first";
                state.addShowPoint = false;
                state.addShowTtation = false;
                state.detailShowTtation = false;
                state.addShowdetailPoint = false;
                state.nodetailShowTtation = false;
                state.addShowdetailPoint = true;
                state.cedianformData = {};
              }, 100);
            }
          });
        } else if (state.cedian == "编辑测点") {
          let arr=[]
          axios.put("/system/point", state.cedianformData).then((res) => {
            if (res.code == 200) {
              ElMessage.success(res.msg);
              getLeftTreeList({});
              getSelectList();
              setTimeout(() => {
                state.activeName = "first";
                state.addShowPoint = false;
                state.addShowTtation = false;
                state.detailShowTtation = false;
                state.addShowdetailPoint = false;
                state.nodetailShowTtation = false;
                state.addShowdetailPoint = true;
                state.cedianDetailData = state.cedianformData;
                state.cedianformData = {};
                state.records=state.cedianDetailData.gasBaseMeasurePointOutageList
      state.records.forEach(item => {
arr.push(item.outPort)
      })
      state.defaultSelectRowKeys=arr
              }, 100);
            }
          });
        }
      }
    }
  });
};
// 查看分站详情
const stationBtndesc = (stationCode) => {
  state.addShowPoint = false;
  state.addShowTtation = false;
  // state.nodetailShowTtation = true;
  state.addShowdetailPoint = false;
  state.addShowOpendetailShow = false;
  state.detailShowTtation = true;
  state.formData = {};
};
// 编辑测点信息
const editstationPointBtn = (stationCode, type) => {
  // getSelectList();
  state.cedian = "编辑测点";
  state.cedianformData = state.cedianDetailData;
  console.log(state.deviceNameList, "deviceNameList");
  state.deviceNameList.forEach((item) => {
    if (item.value == state.cedianDetailData?.imitateType) {
      item.childs?.forEach((item1) => {
        //js截取两个 / 之间的字符串
        let str;
        if (state.cedianDetailData.imitateType == 0) {
          str = state.cedianDetailData.imitateSensorName.split("/")[1];
        } else if (state.cedianDetailData.imitateType == 1) {
          str =
            state.cedianDetailData.imitateSensorName.split("/")[1] +
            "/" +
            state.cedianDetailData.imitateSensorName.split("/")[2];
        }
        console.log(str, "formDatastr");
        if (item1.label == str) {
          if (item1.childs) {
            item1.childs?.forEach((item2) => {
              state.cedianformData.imitateSensorName3 = [
                item.value,
                item1.value,
                item2.value,
              ];
            });
          } else {
            state.cedianformData.imitateSensorName3 = [item.value, item1.value];
          }
        }
      });
    }
  });
  state.addShowTtation = false;
  state.nodetailShowTtation = false;
  state.detailShowTtation = false;
  state.addShowdetailPoint = false;
  state.addShowPoint = true;
  state.formData = {};
};
// 删除测点信息
const deletetreepoint = (datatreeId) => {
  ElMessageBox.confirm("确定要删除吗?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(state.cedianDetailData, "formData");
      axios.delete("/system/point/" + datatreeId).then((res) => {
        if (res.code == 200) {
          ElMessage.success(res.msg);
          getLeftTreeList({});
          state.addShowTtation = false;
          state.detailShowTtation = false;
          state.addShowPoint = false;
          state.addShowOpenShow = false;
          state.addShowOpendetailShow = false;
          state.addShowdetailPoint = false;
          state.nodetailShowTtation = true;
          // state.cutValueListyou = false;
        } else {
          ElMessage.error(res.msg);
        }
      });
      // axios.post('/point/delete?pointId=' + val).then(res => {
      //     proxy.$modal.msgSuccess(res.msg);
      //     getsider()
      // })
    })
    .catch(() => {
      proxy.$modal.msgWarning("删除取消");
    });
};
const changeFaultMode = (val) => {
  state.cedianformData.highFaultData = "";
  state.cedianformData.lowFaultData = "";
  if (val == 1) {
    state.cedianformData.highFaultData = 0;
  } else if (val == 2) {
    state.cedianformData.lowFaultData = 0;
  } else if (val == 0) {
    state.cedianformData.highFaultData = 0;
    state.cedianformData.lowFaultData = 0;
  }
  // if (val == 0) {
    无报警
    // state.cedianformData.outageMode = "00";
  // } else if (val == 1) {
    低报警
    // state.cedianformData.outageMode = "01";
  // } else if (val == 2) {
    高报警
    // state.cedianformData.outageMode = "10";
  // } else if (val == 3) {
    高低报警
    // state.cedianformData.outageMode = "11";
  // }
};
//开出口详情
const addOpenBtn = (id, substationId) => {
  axios
    .post("/system/point/getPointDetailByOutId", {
      outId: id,
      substationId: substationId,
    })
    .then((res) => {
      if (res.rows) {
        state.kaichukoData = res.rows;
        state.addShowdetailPoint = false;
        state.addShowPoint = false;
        state.addShowTtation = false;
        state.nodetailShowTtation = false;
        state.detailShowTtation = false;
        state.addShowOpenShow = false;
        state.addShowOpendetailShow = true;
        // state.cutValueListyou = false;
      }
    });
};
//开出口查看测点详情
const cedianDetailBtn = (row) => {
  axios.get("/system/point/" + row.id).then((res) => {
    if (res.data) {
      state.leftTreeDetail.value = row.id; //用于一键下发
      state.cedianDetailData = res.data;
      state.addShowOpenShow = false;
      state.addShowOpendetailShow = false;
      state.addShowPoint = false;
      state.addShowTtation = false;
      state.nodetailShowTtation = false;
      state.detailShowTtation = false;
      state.addShowdetailPoint = true;
      // state.cutValueListyou = false;
    }
  });
};
//左侧树形列表
const getLeftTreeList = (obj) => {
  let arr = [];
  let pointChildren = [];
  let outChildren = [];
  axios.post("/gas/substation/subStationTree", obj).then((res) => {
    if (res.data.length > 0) {
      res.data.forEach((item) => {
        if (item.pointAndOutVOList) {
          item.pointAndOutVOList.forEach((item1) => {
            pointChildren = item1.pointList.map((item2) => {
              return {
                label: item2.imitateSensorName,
                value: item2.id,
                pointNum: item2.pointNum,
                substationId: item2.substationId,
                pointTypeName: "测点",
              };
            });
            outChildren = item1.outList.map((item2) => {
              return {
                label: item2.out,
                value: item2.id,
                kaichukoName: "开出口",
              };
            });
          });
        }
        arr.push({
          label: item.substationNumber + "-" + "分站",
          value: item.id,
          // id: item.id,
          totalNum: pointChildren.length + outChildren.length,
          type: "fenzhan",
          children: [
            {
              label: "测点",
              value: "nopoint",
              id: "nopoint",
              children: pointChildren,
            },
            {
              label: "开出口",
              value: "noopen",
              id: "noopen",
              children: outChildren,
            },
          ],
        });
        state.datatree = arr;
        state.nodetailShowTtation = true;
      });
    } else if (res.data.length == 0) {
      state.datatree = res.data;
      state.nodetailShowTtation = true;
    }
  });
};
const handleCascaderChange = (value, selectedOptions) => {
  // state.cedianformData.imitateSensorName
  console.log(value, "value");
  state.deviceNameList.forEach((item) => {
    if (item.value == value[0]) {
      item.childs?.forEach((item1) => {
        if (item1.value == value[1]) {
          if (item1.childs) {
            item1.childs?.forEach((item2) => {
              state.cedianformData.imitateSensorName =
                item.label + "/" + item1.label + "/" + item2.label;
            });
          } else {
            state.cedianformData.imitateSensorName =
              item.label + "/" + item1.label;
          }
        }
      });
    }
  });
  state.cedianformData.imitateSensorId = value[value.length - 1]; //传感器id
  state.cedianformData.imitateType = value[0]; //模拟量0，开关量1
};
const handleClick = (val) => {};
//下拉框内容
const getSelectList = () => {
  state.deviceNameList = [];
  //分站编号
  axios.get("/gas/substation/getSubstationNum", {}).then((res) => {
    state.fenzhanSelectList = res.data.map((item) => {
      return { label: item, value: item };
    });
  });
  //测点编号
  axios
    .post("/system/point/getSubstationPointNum", {
      substationId: state.fenzhanDetailData.id,
    })
    .then((res) => {
      state.pointSelectList = res.data.map((item) => {
        return { label: item, value: item };
      });
    });
  //传感器名称
  //模拟量
  let arr = [
    {
      label: "模拟量",
      value: "0",
      childs: [],
    },
  ];
  let childs = [];

  axios.post("/imitate/sensor/list", {}).then((res) => {
    if (res.rows) {
      res.rows.forEach((item, index) => {
        arr[0].childs.push({
          // label: item.deviceName + "/" + item.primaryIndex,
          label: item.deviceName,
          value: String(index),
          name: item.deviceName,
          childs: [],
        });
        arr[0].childs[index].childs.push({
          label: item.subIndex,
          value: item.id,
        });
      });
      state.deviceNameList.push(arr[0]);
      console.log(state.deviceNameList, "state.deviceNameList");
    }
  });
  //开关量
  let arr2 = [
    {
      label: "开关量",
      value: "1",
      childs: [],
    },
  ];
  let childs2 = [];
  axios.post("/switch/sensor/list", {}).then((res) => {
    if (res.rows) {
      res.rows.forEach((item, index) => {
        arr2[0].childs.push({
          label: item.deviceName,
          value: String(index),
          name: item.deviceName,
          childs: [],
        });
        arr2[0].childs[index].childs.push({
          label: item.subIndex,
          value: item.id,
        });
      });
      state.deviceNameList.push(arr2[0]);
    }
  });
  // axios
  //   .post("/imitate/sensor/list", {
  //     pageNum: 1,
  //     pageSize: 1000,
  //   })
  //   .then((res) => {
  //     state.chuanganqiSelectList = res.rows.map((item) => {
  //       return { label: item.deviceName, value: item.deviceName };
  //     });
  //   });

  //安装地点
  axios
    .post("/gas/place/list", {
      pageNum: 1,
      pageSize: 1000,
    })
    .then((res) => {
      if (res.rows) {
        state.placeSelectList = res.rows.map((item) => {
          return { label: item.address, value: String(item.id) };
          // return { label: item.address, value: item.address };
        });
      }
    });
};
function getrouterCedian() {
  console.log(route.query.id, "router");
  axios.get("/system/point/" + route.query.id).then((res) => {
    state.cedianDetailData = res.data;
    state.addShowOpenShow = false;
    state.addShowOpendetailShow = false;
    state.addShowPoint = false;
    state.addShowTtation = false;
    state.nodetailShowTtation = false;
    state.detailShowTtation = false;
    state.addShowdetailPoint = true;
    // state.cutValueListyou = false;
  });
}
onMounted(() => {
  //获取路由传递过来的参数
  console.log(route.query.id, "id");
  setTimeout(() => {
    if (route.query.id) {
      getrouterCedian();
    }
  }, 200);
  getSelectList(); //获取下拉框信息
  getLeftTreeList({}); //获取左侧树形列表
});
</script>
<style scoped lang="scss">
.title_r_box {
  padding-top: 1px;
  position: sticky;
  z-index: 3;
  top: 0px;
  background: #fff;
}
.title_r {
  border-radius: 4px 4px 0 0;
  padding: 15px 10px;
  font-size: 14px;
  color: rgba(52, 76, 107, 0.6);
  background-color: rgba(247, 247, 247, 1);
  margin: 0;

  span {
    margin-right: 10px;

    &.active {
      color: rgba(64, 158, 255, 1);
      position: relative;

      &::before {
        position: absolute;
        content: "";
        left: 50%;
        transform: translateX(-50%);
        bottom: -15px;
        width: 100%;
        height: 2px;
        background-color: rgba(64, 158, 255, 1);
      }
    }
  }
}
.p_btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.formBox {
  border: 1px solid rgba(247, 247, 247, 1);
  padding-bottom: 10px;
}
.desc_box {
  padding: 10px;
  background: rgba(91, 109, 128, 0.04);
  margin: 10px 10px 0;
}
.footer_card {
  margin-top: 20px;

  .btn {
    margin: 0 5px;
  }
}
.desc_box_item {
  text-align: center;
  .one {
    margin: 10px 0;
    span:nth-child(1) {
      font-size: 12px;
      color: #fff;
      padding: 1px 5px;
      background-color: #67c23a;
      border-radius: 3px;
    }
    span:nth-child(2) {
      font-size: 12px;
      color: #fff;
      padding: 1px 5px;
      background-color: #358cf0;
      border-radius: 3px;
      margin-left: 8px;
    }
  }
  .two {
    font-weight: 700;
    margin: 20px 0;
  }
  .three {
    .three-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      span:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
  .four {
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    .four-item {
      font-size: 14px;
      .four-item-top {
        color: rgba(62, 70, 79, 0.6);
        // text-align: left;
      }
      .four-item-bottom {
        margin-top: 5px;
        color: rgba(62, 70, 79, 1);
      }
    }
  }
}
.demo-tabs {
  padding: 10px;
}
::v-deep .el-tabs__nav-wrap::after {
  width: 0;
  height: 0;
}
.cedianxinxi {
  .cedianxinxi-left {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .onlines {
      width: 40px;
      font-size: 12px;
      background-color: #6cc441;
      color: #fff;
      padding: 2px 0;
      margin-top: 10px;
      border-radius: 5px;
    }
    .names {
      font-size: 14px;
      font-weight: 700;
      margin-top: 20px;
    }
  }
  .cedianxinxi-right {
    font-size: 14px;
    margin-top: 40px;
    .t1 {
      color: rgba(62, 70, 79, 0.6);
    }
    .t2 {
      margin-top: 10px;
    }
  }
}
.kaichuko-title {
  margin: 10px 0 10px 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  &:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 15px;
    background-color: #409eff;
    margin-right: 5px;
  }
}
</style>

<style scoped lang="scss">
.blue {
  padding: 0 5px;
  color: rgba(42, 130, 228, 1);
  background: rgba(42, 130, 228, 0.1);
  border: 1px solid rgba(42, 130, 228, 0.87);
}
.grey {
  padding: 0px 10px;
  color: rgba(184, 184, 184, 1);
  background: rgba(184, 184, 184, 0.1);
  border: 1px solid rgba(184, 184, 184, 0.87);
}
</style>
